<!--
  困难职工年收入信息统计页面
-->
<template>
  <div>
    <div class="header">
      <el-page-header @back="goBack" content="职工收入情况统计"></el-page-header>
      <el-row>
        <el-button type="primary" @click="graph()">统计各收入区间人数</el-button>
      </el-row>
    </div>
    <!-- 困难职工信息表 -->
    <div>
      <el-table
        :data="allTableData"
        stripe
        border
        v-loading="loading"
        style="width: 100%;margin-top: 30px;"
        height="560">
        <el-table-column prop="wid" label="编号" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="gender" label="性别" width="140">
          <template slot-scope="scope">
            <span>{{typeSex[scope.row.genderInt]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄"  width="140"></el-table-column>
        <el-table-column prop="healthyStatus" label="健康状况" width="140" >
          <template slot-scope="scope">
            <span>{{typeHealthy[scope.row.healthStatus]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salary" label="年收入" width="200"></el-table-column>
        <el-table-column prop="srId" label="困难原因">
          <template slot-scope="scope">
            <span>{{typeDif[scope.row.srId]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 困难职工年收入情况统计弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="90%">
      <div class="dialog-style">
        <!--困难职工年收入情况可视化统计图-->
        <div class="schart" v-if="dialogVisible">
          <schart class="wrapper" canvasId="canvas" :options="options" />
        </div>
        <!--困难职工年收入统计数据表-->
        <el-table
          :data="staIncomeData"
          stripe
          border
          style="width:903px;margin-top: 5px;left:16%;height: 300px;"
          height="287px">
          <el-table-column prop="incomeRange" label="困难职工年收入区间" width="300"></el-table-column>
          <el-table-column prop="num" label="困难职工数量" width="300"></el-table-column>
          <el-table-column prop="percent" label="占比"  width="300"></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import instance from "../../../utils/request";
import Schart from 'vue-schart';

export default {
  name: "StaIncome",

  data(){
    return {
      //数据加载动画开闭控制变量
      loading:true,
      //弹框开闭控制变量（弹窗是否显示）
      dialogVisible:false,
      //困难职工致贫原因映射
      typeDif: {
        "1":"本人重病",
        "2":"本人下岗",
        "3":"家人重病",
        "4":"自然灾害",
        "5":"子女上学"
      },
      //困难职工性别映射
      typeSex:{
        "0":"女",
        "1":"男"
      },
      //困难职工健康状况映射
      typeHealthy:{
        "0":"不健康",
        "1":"健康"
      },
      //困难职工年收入统计表数据数组
      staIncomeData:[
        {incomeRange:"低于2万元", num:0, percent:0},
        {incomeRange:"2~4万元", num:0, percent:0},
        {incomeRange:"4~6万元", num:0, percent:0},
        {incomeRange:"6~8万元", num:0, percent:0},
        {incomeRange:"高于8万元", num:0, percent:0},
      ],
      //困难职工年收入统计数据可视化柱状图数据加载对象
      options: {
        type: "bar",
        title: {
          text: "困难职工收入情况统计图"
        },
        bgColor: "#fbfbfb",
        labels: ["低于2万元", "2~4万元", "4~6万元", "6~8万元", "高于8万元"],
        datasets: [
          {
            label: "困难职工人数",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [0, 0, 0, 0, 0]
          },
        ]
      },
      //困难职工信息表数据数组
      allTableData:[
        // {wId:1,name:"sdf",genderInt:1,age:12,healthStatus:1,salary:20000,srId:1},
      ]
    }
  },
  components:{
    //可视化统计图组件
    Schart
  },
  //加载困难职工信息表数据方法（生命周期方法）
  created() {
    let _this = this;
    instance.get('/api/analyze/getRecordMoney').then(function (res) {
      console.log(res);
      if(res.data.code === 200){
        //数据处理逻辑
        console.log(res);
        _this.allTableData=res.data.data;
        _this.loading = false;
        //alert('数据获取成功！');
        console.log(_this.allTableData);
      }
      else if(res.data.code === 208){
        alert('查询信息不存在');
        //清空状态
      }
      else {
        alert('失败');
      }

    }).catch(function (err) {
      console.log(err);
    });

  },

  methods:{
    //困难职工收入情况统计方法（计算函数）
    statData() {
      for(var i=0;i<this.allTableData.length;i++)
      {
        //统计乃收入低于2万元的职工人数及其占比
        if(this.allTableData[i].salary<20000)
        {
          this.staIncomeData[0].num++;
          this.staIncomeData[0].percent = (this.staIncomeData[0].num / this.allTableData.length).toFixed(2);
        }
        //统计乃收入在2-4万元的职工人数及其占比
        else if(this.allTableData[i].salary<40000)
        {
          this.staIncomeData[1].num++;
          this.staIncomeData[1].percent = (this.staIncomeData[1].num / this.allTableData.length).toFixed(2);
        }
        //统计乃收入在4-6万元的职工人数及其占比
        else if(this.allTableData[i].salary<60000)
        {
          this.staIncomeData[2].num++;
          this.staIncomeData[2].percent = (this.staIncomeData[2].num / this.allTableData.length).toFixed(2);
        }
        //统计乃收入在6-8万元的职工人数及其占比
        else if(this.allTableData[i].salary<80000)
        {
          this.staIncomeData[3].num++;
          this.staIncomeData[3].percent = (this.staIncomeData[3].num / this.allTableData.length).toFixed(2);
        }
        //统计乃收入高于8万元的职工人数及其占比
        else
        {
          this.staIncomeData[4].num++;
          this.staIncomeData[4].percent = (this.staIncomeData[4].num / this.allTableData.length).toFixed(2);
        }
      }

    },
    //返回方法上次浏览页面
    goBack() {
      this.$router.go(-1);
    },

    //困难职工年收入情况统计表数据加载方法
    graph(){
      this.statData();
      this.options.datasets[0].data[0]=this.staIncomeData[0].num;
      this.options.datasets[0].data[1]=this.staIncomeData[1].num;
      this.options.datasets[0].data[2]=this.staIncomeData[2].num;
      this.options.datasets[0].data[3]=this.staIncomeData[3].num;
      this.options.datasets[0].data[4]=this.staIncomeData[4].num;
      //打开弹窗
      this.dialogVisible = true;
    },
  }
}
</script>

<style scoped>
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header>span {
  color: #03a9f4;
}
.schart{
  width: 600px;
  display: inline-block;
}
.wrapper{
  width:600px;
  height: 500px;
}
</style>
